<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">在线客服</span>
    </div>
    <div class="chat">
      <div
        v-for="(item, index) in chatList"
        :key="index"
        :class="item.userId == id ? 'right' : 'left'"
      >
        <img class="avatar" src="../.../../../assets/images/timg.png" />
        <div class="content">{{ item.ctn }}</div>
      </div>
    </div>
    <div class="btm">
      <div class="input">
        <van-field v-model="value" />
      </div>
      <img class="send" src="../../assets/images/send.png" @click="send" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      chatList: [
        { userId: 2, name: "张三", ctn: "请问有什么可以帮助你的吗？" },
        { userId: 1, name: "李四", ctn: "其实并没有！！！！" }
      ],
      value: ""
    };
  },
  methods: {
    send() {
      if (!this.value) return this.$toast("请输入内容！");
      this.chatList.push({
        userId: 1,
        name: "李四",
        ctn: this.value
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chat {
  padding: 20px 10px;
  .left,
  .right {
    display: flex;
    margin-bottom: 20px;
    img {
      width: 56px;
      max-height: 42px;
    }
    .content {
      padding: 8px 10px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      font-size: 14px;
      line-height: 28px;
      max-width: calc(100% - 66px);
      word-break: break-word;
      box-shadow: 0 0 5px #ddd;
      &::before {
        content: "";
        position: absolute;
        top: 15px;
        border: 5px solid transparent;
        width: 0;
        height: 0;
      }
    }
  }
  .left {
    padding-right: 15%;
    img {
      margin-right: 10px;
    }
    .content::before {
      left: -10px;
      border-right-color: #fff;
    }
  }
  .right {
    padding-left: 15%;
    flex-direction: row-reverse;
    img {
      margin-left: 10px;
    }
    .content {
      background-color: #e5e4db;
      box-shadow: 0 0 5px #ccc;
      border-right-color: #fff;
      &::before {
        right: -9px;
        border-left-color: #e5e4db;
      }
    }
  }
}
.btm {
  background: rgb(248, 248, 248);
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  .input {
    flex: 1;
    padding: 5px 10px;
  }
  .send {
    width: 30px;
    height: 30px;
    margin: 0 10px 0 5px;
  }
}
</style>
